﻿<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript" langu1age="javascript">
        var hostName = "http://localhost:81/";
        function dummyCallback(data) { }
        function sendData() {
            var text = chatText.value;
            $.ajax({
                type: "POST",
                url: hostName + "/send",
                data: {
                    pipe: $("#sendPipe").text(),
                    topic: "chat",
                    package: JSON.stringify({ "user": $("#userName").text(), "text": text })
                },
                contentType: "application/json",
                dataType: "jsonp",
                jsonpCallback: "dummyCallback",
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        }
        $(document).ready(function () {
            $.getJSON(hostName + "register?type=multicast_send&scope=myscope&callback=?", function (data) {
                $("#sendPipe").text(data);
                $("#userName").text("Guest-" + data.toString().substring(0, 4));
            });
            $.getJSON(hostName + "register?type=receive&scope=myscope&topic=chat&callback=?", function (data) {
                $("#receivePipe").text(data);
            });
            $("#sendButton").click(function(event){sendData();});
            $("#chatText").keypress(function (event) {
                if (event.which == 13) {
                    event.preventDefault();
                    sendData();
                }
            });
            receiveData();
        });
        function receiveData() {
            $.getJSON(hostName + "receive?pipe=" + $("#receivePipe").text() + "&topic=chat&callback=?", function (data) {
                if (data) {
                    var o = $.parseJSON(data);
                    if (o.user == $("#userName").text())
                        $("#chatHistory").html($("#chatHistory").html() + "<br/><span class=\"me\">me</span>:&nbsp;<span class=\"metext\">" + o.text + "</span>");
                    else 
                        $("#chatHistory").html($("#chatHistory").html() + "<br/><span class=\"other\">" + o.user + "</span>:&nbsp;<span class=\"othertext\">" + o.text + "</span>");
                    chatHistory.scrollTop = chatHistory.scrollHeight;
                }
                receiveData();
            })
            .error(function () { setTimeout(function () { receiveData() }, 1000); });
        }
    </script>
    <style type="text/css">
        body
        {
            background-color:Black;
            color:White;
        }
        .chatWindow
        {
            background-color:Aqua;
            width:415px;
            height:300px;
            color:Black;
            overflow:scroll;
        }
        .sendButton
        {
            width:80px;
            height:80px;
            font-family:Arial;
            font-size:18pt;
            background-color: Orange;
            text-align:left;
            border-style:none;
        }
        .chatText
        {
            width:320px;
            height:74px;
        }
        .me
        {
            color:Blue;
            font-style:italic;
            font-weight:bold;
        }
        .other
        {
            color:Orange;
            font-weight:bold;
        }
        .metext
        {
            color:Black;
        }
        .othertext
        {
            color:#990000;
        }
    </style>
</head>
<body>
    <h1>
        Azure Toss Chat Sample 0.85</h1>
    <table cellspacing="5">
        <tr>
            <td colspan="2">
                Send Pipe <div id="sendPipe" />
            </td>
        </tr>
        <tr>
            <td>
                Receive Pipe <div id="receivePipe" />
            </td>
        </tr>
        <tr>
            <td colspan="2" id="userName">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="chatWindow" id="chatHistory" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" maxlength="800" class="chatText" id="chatText"/>
            </td>
            <td>
                <input type="button" value="Send" class="sendButton" id="sendButton"/>
            </td>
        </tr>
    </table>
</body>
</html>
